<template>
    <div :class="`${columnClass} ${className}`">
        <label class="text-gray-5 mr-2 text-2xl" :class="labelClass" v-if="label">
            <span v-if="required" class="text-red">*</span>{{label}}:
        </label>
        <slot>{{value}}</slot>
    </div>
</template>

<script>

const enNumbers = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight',
    'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen']

export default {
    name: 'field',
    props: {
        width: {
            type: Number,
            required: false,
        },
        label: {
            required: true,
        },
        className: {
            default: '',
            required: false,
        },
        labelClass: {
            required: false,
        },
        required: {
            type: Boolean,
        },
        value: {
            required: false,
        }
    },
    computed: {
        columnClass() {
            if (!this.width) {
                return ''
            }

            let n = 16
            if (this.width <= 1) {
                n = _.round(this.width * 16)
            } else {
                n = this.width
            }
            return `${enNumbers[n]} wide column`
        }
    }
}
</script>

